<template>
  <div class="timeline">
    <h2>时间轴</h2>
    
    <!-- 日期选择器 -->
    <div class="date-selector">
      <input type="date" v-model="selectedDate" @change="fetchTimelineData">
    </div>

    <!-- 时间轴展示 -->
    <div class="timeline-container">
      <div v-for="record in timelineRecords" :key="record.id" class="timeline-item">
        <div class="timeline-time">{{ formatTime(record.created_at) }}</div>
        <div class="timeline-content">
          <h3>{{ record.habit_name }}</h3>
          <p>专注时长: {{ record.duration }}分钟</p>
          <p>获得积分: {{ record.points_earned }}</p>
          <div class="timeline-status" :class="record.completed ? 'completed' : ''">
            {{ record.completed ? '已完成' : '进行中' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Timeline',
  props: {
    childId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      selectedDate: new Date().toISOString().split('T')[0],
      timelineRecords: []
    }
  },
  methods: {
    async fetchTimelineData() {
      try {
        const response = await axios.get(
          `http://localhost:5000/api/timeline/${this.childId}`,
          { params: { date: this.selectedDate } }
        )
        this.timelineRecords = response.data
      } catch (error) {
        console.error('获取时间轴数据失败:', error)
      }
    },
    formatTime(datetime) {
      return new Date(datetime).toLocaleTimeString()
    }
  },
  mounted() {
    this.fetchTimelineData()
  }
}
</script>

<style scoped>
.timeline {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.date-selector {
  margin-bottom: 20px;
}

.timeline-container {
  position: relative;
  padding-left: 50px;
}

.timeline-container::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #42b983;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -44px;
  top: 20px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #42b983;
  border: 2px solid #fff;
}

.timeline-time {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 10px;
}

.timeline-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background: #f0f0f0;
  color: #666;
}

.timeline-status.completed {
  background: #42b983;
  color: white;
}
</style> 